<template>
<div style="margin-top: 20px;margin-left: 20px;margin-right: 20px">
  <!--搜索-->
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>条件搜索</span>
    </div>
    <div class="search">
      <!--搜索框-->
      <el-input
          placeholder="请输入选题名称"
          prefix-icon="el-icon-search"
          style="width: 200px"
          v-model="queryParams.title">
      </el-input>
      <el-input
        placeholder="请输入指导老师姓名"
        prefix-icon="el-icon-search"
        style="width: 200px;margin-left: 10px"
        v-model="queryParams.mentor">
      </el-input>
      <!--下拉选择框-->
      <el-select v-model="queryParams.state" placeholder="请选择" style="margin-left: 10px">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <!--搜索按钮-->
      <div class="search-btn">
        <el-button type="primary" @click="SearchTopics">查询</el-button>
        <el-button type="info" @click="clear">清空</el-button>
      </div>
    </div>
  </el-card>

  <!--毕业论文表单-->
  <el-card class="box-card" style="margin-top: 20px">
    <el-table
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%">
      <el-table-column prop="id" label="ID" width="100" v-if="false" />
      <el-table-column prop="state" label="是否被选" :formatter="selectedState" width="80" />
      <el-table-column prop="profession" label="面向专业/学生" show-overflow-tooltip />
      <el-table-column prop="title" label="课题名称" show-overflow-tooltip min-width="120" />
      <el-table-column prop="username" label="指导教师" width="80" />
      <el-table-column prop="phone" label="联系电话" />
      <el-table-column prop="email" label="电子邮箱" min-width="100" />
      <el-table-column prop="source" label="课题来源" />
      <el-table-column prop="type" label="课题类别" />
      <!--<el-table-column prop="topicAchiClass" label="成果类别" />-->
      <el-table-column prop="approach" label="课程完成途径" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div v-if="scope.row.state === 0">
            <el-button
                size="mini"
                type="primary"
                @click="selectTopic(scope.row)">选题</el-button>
          </div>
          <div v-else>
            <el-button disabled
                size="mini"
                type="primary"
                @click="selectTopic(scope.row)">选题</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNum">
      </el-pagination>
    </div>
  </el-card>
</div>

</template>

<script>
import { getAllThesisApi, selectThesisApi } from "@/api/ThesisApi";

export default {
  name: "SelectTopic",
  data() {
    return {
      queryParams:{
        title: '',
        mentor: '',
        state: 3
      },
      tableData:[],
      totalNum: 0,
      currentPage: 1,
      pageSize:20,
      options: [{
        value: 3,
        label: '全部'
      },{
        value: 0,
        label: '未被选'
      },{
        value: 1,
        label: '待审核'
      },{
        value: 2,
        label: '已被选'
      }]
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAllTopics(this.currentPage, this.pageSize)
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getAllTopics(this.currentPage, this.pageSize)
    },
    getAllTopics(param1, param2) {
      getAllThesisApi({'current': param1, "size": param2}).then(res => {
        this.totalNum = res.data.total
        this.tableData = res.data.records
      })
    },
    SearchTopics() {
      let params = {
        current: this.currentPage,
        size: this.pageSize,
        ...this.queryParams
      }
      getAllThesisApi(params).then(res => {
        if(res.code === 200) {
          console.log(res)
          this.totalNum = res.data.total
          this.tableData = res.data.records
          this.$message.success("查询成功")
        } else if(res.code !== 401 || res.code !== 403){
          this.$message.error(res.msg)
        }

      })
    },
    clear() {
      this.queryParams = {
        searchKey: '',
        mentor: '',
        state: 3
      }
      this.getAllTopics(this.currentPage, this.pageSize)
    },
    selectedState(row) {
      switch (row.state) {
        case 0:
          return <el-tag>未被选</el-tag>
        case 1:
          return <el-tag type="warning">审核中</el-tag>
        case 2:
          return <el-tag type="danger">已被选</el-tag>
        default:
          return <el-tag type="danger">未知</el-tag>
      }
    },
    selectTopic(row) {
      if(row.state === 1 || row.state === 2) {
        this.$alert('对不起，该课题已被选或者在审核中,请联系指导老师', '提示', {
          confirmButtonText: '确定'
        })
      } else if(row.state === 0) {
        this.$confirm('确定选择该课题？选择之后无法选择其他课题', '提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          selectThesisApi(row.id).then(res => {
            if (res.code === 200) {
              this.$message.success("选题成功")
              this.getAllTopics(this.currentPage, this.pageSize)
            } else {
              this.$message.error("选题失败")
            }
          })
        })
      }
    }
  },
  created() {
    this.getAllTopics(this.currentPage, this.pageSize)
  }
}
</script>

<style scoped>


.search-btn {
  margin-left: 5px;
  display: inline-block;
  float: right;
}
.block {
  margin-top: 10px ;
  width: 100%;
  display:inline-block;
  text-align:center;
}
</style>
